import { useEffect, useState } from 'react';
import { history } from 'umi';
import {
  Button,
  Form,
  Input,
  Select,
  Space,
  Tooltip,
  Typography,
  DatePicker,
  Modal,
  Radio,
  Upload,
  Checkbox,
  Row,
  Col,
} from 'antd';
import moment from 'moment';
import { timestampToTime } from '@/utils';
import AMapLoader from '@amap/amap-jsapi-loader';
import '@wangeditor/editor/dist/css/style.css'; // 引入 css
import { Editor, Toolbar } from '@wangeditor/editor-for-react';
import { IDomEditor, IEditorConfig, IToolbarConfig } from '@wangeditor/editor';
import { useDispatch } from 'umi';
import { PlusOutlined } from '@ant-design/icons';

const { Option } = Select;
const dateFormat = 'YYYY-MM-DD';
const { Search } = Input;

export default () => {
  const dispatch = useDispatch();
  const { data }: any = history.location.state;
  const { fatherType, isedit }: any = history.location.state;
  const [form] = Form.useForm();
  const [open, setOpen] = useState(false);

  useEffect(() => {
    console.log(data, fatherType);

    form.setFieldsValue({
      ...data,
    });
    AMapLoader.load({
      key: '470144589fc7d0c0b75f4e2c143fc639', // 申请好的Web端开发者Key，首次调用 load 时必填
      version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      plugins: [''], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    })
      .then((AMap) => {
        var map = {};

        map = new AMap.Map('container', {
          //设置地图容器id
          // viewMode: '3D', //是否为3D地图模式
          // zoom: 5, //初始化地图级别 远近
          center: [data.lng || 110.397428, data.lat || 20.90923], //初始化地图中心点位置
        });
      })
      .catch((e) => {
        console.log(e);
      });
  }, [open]);
  const onFinish = (values: any) => {
    // console.log('Received values of form: ', values);
    switch (fatherType) {
      case 'officesale':
        dispatch({
          type: 'commerce/editofficesale',
          payload: { id: data.id, values: values },
        });
        break;
      case 'officehire':
        dispatch({
          type: 'commerce/editofficehire',
          payload: { id: data.id, values: values },
        });
        break;
      case 'shopssale':
        dispatch({
          type: 'commerce/editshopssale',
          payload: { id: data.id, values: values },
        });
        break;
      case 'shopshire':
        dispatch({
          type: 'commerce/editshopshire',
          payload: { id: data.id, values: values },
        });
        break;
    }
    history.goBack();
    // dispatch({
    //   type: 'area/edithirelist',
    //   payload: { id: data.id, values: values },
    // });
    // history.push('/index/secound/hirehouse');
  };
  const handleOk = () => {
    setOpen(false);
  };
  const handleClose = () => {
    setOpen(false);
  };

  // editor 实例
  const [editor, setEditor] = useState<IDomEditor | null>(null); // TS 语法
  // const [editor, setEditor] = useState(null)                   // JS 语法

  // 编辑器内容
  const [html, setHtml] = useState('<p>hello</p>');

  // 模拟 ajax 请求，异步设置 html
  useEffect(() => {
    setTimeout(() => {
      setHtml('<p>hello world</p>');
    }, 1500);
  }, []);

  // 工具栏配置
  const toolbarConfig: Partial<IToolbarConfig> = {}; // TS 语法
  // const toolbarConfig = { }                        // JS 语法

  // 编辑器配置
  const editorConfig: Partial<IEditorConfig> = {
    // TS 语法
    // const editorConfig = {                         // JS 语法
    placeholder: '请输入内容...',
  };

  // 及时销毁 editor ，重要！
  useEffect(() => {
    return () => {
      if (editor == null) return;
      editor.destroy();
      setEditor(null);
    };
  }, [editor]);
  return (
    <>
      <Form
        name="basic"
        onFinish={onFinish}
        // autoComplete="off"
        labelCol={{ span: 2 }}
        wrapperCol={{ span: 16 }}
        form={form}
      >
        <Form.Item label="楼盘名称" name="estate_name">
          <Input style={{ width: 300 }} />
        </Form.Item>

        <Form.Item
          label="房源名称"
          name="title"
          rules={[{ required: true, message: 'Please input your username!' }]}
        >
          <Input style={{ width: 300 }} />
        </Form.Item>

        <Form.Item label="房型">
          <Space>
            <Form.Item name="room" noStyle>
              <Input style={{ width: 50 }} />
            </Form.Item>
            <span>室</span>
            <Form.Item name="living_room" noStyle>
              <Input style={{ width: 50 }} />
            </Form.Item>
            <span>厅</span>
            <Form.Item name="rec_position" noStyle>
              <Input style={{ width: 50 }} />
            </Form.Item>
            <span>位</span>
          </Space>
        </Form.Item>

        <Form.Item label="面积">
          <Space>
            <Form.Item name="acreage" noStyle>
              <Input style={{ width: 60 }} />
            </Form.Item>
            <span>m²总价</span>
            <Form.Item name="price" noStyle>
              <Input style={{ width: 60 }} />
            </Form.Item>
            <span>万</span>
          </Space>
        </Form.Item>

        <Form.Item
          label="楼盘地址"
          name="address"
          rules={[{ required: true, message: 'Please input your username!' }]}
        >
          <Input style={{ width: 300 }} />
        </Form.Item>
        <Form.Item label="售楼处地址" name="sale_address">
          <Input style={{ width: 300 }} />
        </Form.Item>

        <Form.Item label="缩略图">
          <Upload action="/upload.do" listType="picture-card">
            <div>
              <PlusOutlined />
              <div style={{ marginTop: 8 }}>上传图片</div>
            </div>
          </Upload>
        </Form.Item>

        <Form.Item label="地图坐标">
          <Search
            style={{ width: '300px' }}
            value={`${data.lng || 0},${data.lat || 0}`}
            enterButton={'标注位置'}
            onSearch={(value) => {
              setOpen(true);
            }}
          />
        </Form.Item>

        <Form.Item label="装修情况" name={'renovation'}>
          <Radio.Group>
            <Radio value={0}>简装</Radio>
            <Radio value={1}>精装</Radio>
            <Radio value={2}>豪装</Radio>
            <Radio value={3}>发多少</Radio>
          </Radio.Group>
        </Form.Item>

        <Form.Item name="tags" label="装修情况">
          <Checkbox.Group style={{ width: '500px' }}>
            <Row>
              <Col span={4}>
                <Checkbox value="95" style={{ lineHeight: '32px' }}>
                  电视
                </Checkbox>
              </Col>
              <Col span={4}>
                <Checkbox value="96" style={{ lineHeight: '32px' }}>
                  空调
                </Checkbox>
              </Col>
              <Col span={4}>
                <Checkbox value="97" style={{ lineHeight: '32px' }}>
                  电梯
                </Checkbox>
              </Col>
              <Col span={4}>
                <Checkbox value="98" style={{ lineHeight: '32px' }}>
                  冰箱
                </Checkbox>
              </Col>
              <Col span={4}>
                <Checkbox value="99" style={{ lineHeight: '32px' }}>
                  洗衣机
                </Checkbox>
              </Col>
              <Col span={4}>
                <Checkbox value="100" style={{ lineHeight: '32px' }}>
                  热水器
                </Checkbox>
              </Col>
            </Row>
          </Checkbox.Group>
        </Form.Item>

        <Form.Item label="楼盘介绍" wrapperCol={{ span: 16 }}>
          <div style={{ border: '1px solid #ccc', zIndex: 100 }}>
            <Toolbar
              editor={editor}
              defaultConfig={toolbarConfig}
              mode="default"
              style={{ borderBottom: '1px solid #ccc' }}
            />
            <Editor
              defaultConfig={editorConfig}
              value={html}
              onCreated={setEditor}
              onChange={(editor) => setHtml(editor.getHtml())}
              mode="default"
              style={{ height: '500px', overflowY: 'hidden' }}
            />
          </div>
          <div style={{ marginTop: '15px' }}>{html}</div>
        </Form.Item>
        <Form.Item wrapperCol={{ offset: 6, span: 16 }}>
          <Button type="primary" htmlType="submit">
            提交
          </Button>
        </Form.Item>
      </Form>

      <Modal open={open} onOk={handleOk} onCancel={handleClose}>
        <div id="container" className="map" style={{ height: '300px' }}></div>
      </Modal>
    </>
  );
};
